<template>
    <div>
        <div class="top">
            <van-icon class="icon" name="cross" size="25" @click="back" />
            <span class="text">消息中心</span>
        </div>

        <!--  -->
        <van-swipe-cell v-show="show">
            <van-cell  title="官方消息" />
            <template #right>
                <van-button @click="del" square type="danger" text="删除" />
            </template>
        </van-swipe-cell>
        <van-swipe-cell v-show="show1">
            <van-cell  title="天气通知" />
            <template #right>
                <van-button @click="del1" square type="danger" text="删除" />
            </template>
        </van-swipe-cell>
        <van-swipe-cell v-show="show2">
            <van-cell  title="好友消息" />
            <template #right>
                <van-button @click="del2" square type="danger" text="删除" />
            </template>
        </van-swipe-cell>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                show: true,
                show1: true,
                show2: true,
            }
        },
        methods: {
            back(){
                this.$router.push('home/index')
            },
            del(){
                this.show=false
            },
            del1(){
                this.show1=false
            },
            del2(){
                this.show2=false
            },
        },
    }
</script>

<style lang="scss" scoped>
.top {
    width: 100vw;
    height: 54px;
    background-color: #c67120;
    position: relative;
    display: flex;
    .icon {
        position: absolute;
        top: 20%;
        color: #fff;
        margin-left: 10px;
    }
    .text {
        font-size: 20px;
        position: absolute;
        left: 40%;
        top:20%;
        color: #fff;
    }
}
</style>